<template>
    <div class="drawer_form_mode">
        <el-drawer :title="state ? '文件夹编辑' : '新建文件夹'" v-model="drawerShow" 
            direction="rtl" :before-close="drawerClose" :size="900"
            :close-on-click-modal="false">
            <el-form :model="formData" :rules="formRules" ref="formRef" :inline="true" 
                label-position="top" require-asterisk-position="right">
                <el-row :gutter="24" class="width-all" style="margin-left: 0px;">
                    <el-col :span="24"><h4 class="formItemTitle">基本信息</h4></el-col>
                    <el-col :span="12">
                        <el-form-item label="资质名称" prop="aptitudeName">
                            <el-input v-model="formData.aptitudeName" placeholder="请输入资质名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证书编号" prop="reportNum">
                            <el-input v-model="formData.reportNum" placeholder="请输入证书编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发证日期" prop="issuanceDate">
                            <el-date-picker v-model="formData.issuanceDate" type="date" value-format="YYYY-MM-DD"
                                placeholder="请选择发证日期" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="有效期截止日" prop="deadlineDate">
                            <el-date-picker v-model="formData.deadlineDate" type="date" value-format="YYYY-MM-DD"
                                placeholder="请选择有效期截止日" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="下次年鉴日期" prop="annuallyDate">
                            <el-date-picker v-model="formData.annuallyDate" type="date" value-format="YYYY-MM-DD"
                                placeholder="请选择下次年鉴日期" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="资质标签" prop="label">
                            <el-input v-model="formData.label" placeholder="请输入标签"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24"><h4 class="formItemTitle">其他信息</h4></el-col>
                    <el-col :span="24">
                        <el-form-item label="资质说明" prop="remarks">
                            <el-input v-model="formData.remarks" type="textarea" placeholder="请输入资质说明"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件" prop="attachArr">
                            <DataUploadPlus v-model="formData.fileList" :drag="true" :limit="3"></DataUploadPlus>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="drawerClose">取 消</el-button>
                    <el-button type="primary" @click="submitForm">提 交</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import DataUploadPlus from "@/components/DataComponents/DataUploadPlus.vue"
    const { proxy } = getCurrentInstance();
    const props = defineProps(['show', 'defaultValue', 'state']);
    const emit = defineEmits(['update:show', 'submit', ]);
    const drawerShow = ref(false);
    const formData = ref({})
    const formRules = ref({
        aptitudeName: { required: true, trigger: ['blur'], message: '请输入资质名称' },
        reportNum: { required: true, trigger: ['blur'], message: '请输入证书编号' },
        issuanceDate: { required: true, trigger: ['change'], message: '请选择发证日期' },
        deadlineDate: { required: true, trigger: ['change'], message: '请选择有效期截止日' },
        annuallyDate: { required: true, trigger: ['change'], message: '请选择下次年鉴日期' },
    });
    watch(() => props.show, () => {
        drawerShow.value = props.show;
        if(drawerShow.value){
            if(props.state) setDedefaultValue();
        }else{
            resetFormData();
        }
    }, { deep: true });
    const setDedefaultValue = () => {
        const defaultValue = props.defaultValue;
        formData.value = defaultValue;
        const attachUrlList = defaultValue.attachUrl ? defaultValue.attachUrl.split(',') : []
        const attachNameList = attachUrlList.map( item => {
            const nameList = item.split('/');
            return nameList[nameList.length - 1];
        })
        formData.value.fileList = [];
        attachUrlList.map((item, index) => {
            const obj = {
                name: attachNameList[index],
                url: item,
            }
            formData.value.fileList.push(obj);
        });
        console.log('formData.value', formData.value);
    };
    const submitForm = () => {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                emit('submit', formData.value);
            }
        })
    };
    const resetFormData = () => {
        formData.value = {};
        proxy.resetForm("formRef");
    };
    const drawerClose = () => {
        emit('update:show', false);
        resetFormData();
    };
    defineExpose({drawerClose});
</script>
<style scoped lang="scss">
    :deep(.el-drawer__body){
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 10px;
    }
</style>